<template>
	<view class="father">
		<template v-if="WillSentArray.length">
			<scroll-view lower-threshold="20" @scrolltolower="lowerOccur()" class="Sent" scroll-y="true" enable-flex="true">
				<view class="card" v-for="item in WillSentArray" :key="item.id">
					<view class="content">
						<view class="item">
							<view style="height: 30px;line-height: 20px;font-size: 20px;font-weight: bold;border-bottom: 2px dashed black;padding-left: 10px;padding-top: 10px;">
								<uni-icons color="#2f9e44" type="map-pin-ellipse" size="27"></uni-icons>
								<h1 style="display: inline-block;margin-left: 2px;">距离：0.4km</h1>
							</view>
							<view style="margin:10px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">
								<uni-icons type="location-filled" size="27" color="#2f9e44"></uni-icons>
								<!-- <image style="background: url('./../../static/address.png') no-repeat;height: 30px;width: 20px;"></image> -->
								<text>{{item.address}}</text>
							</view>
							<view style="margin:10px;border-bottom: 2px solid black;height: 40px;line-height: 40px;">
								<uni-icons type="shop-filled" color="#2f9e44" size="27"></uni-icons>
								<text>送达时间：{{item.estimatedDeliveryTime}}</text>
							</view>
							<view style="margin:0px 10px 10px 10px">
								<uni-icons type="phone-filled" color="#2f9e44" size="27"></uni-icons>
								<text>客户电话：{{item.phone.slice(0, 3)+'****'+item.phone.slice(7)}}</text>
							</view>
							<button @click="receiveOrder(item.id)" type="primary" style=";float: right;margin-right: 25px;" size="mini">接单</button>
						</view>
					</view>
				</view>
			</scroll-view>
		</template>
		<template v-else>
			<view class="son">
				<h1 style="color: gray;">暂无数据</h1>
			</view>
		</template>
	</view>
</template>

<script>
import {getOrderList, getOrderDelivery} from '../../api.js';
export default {
	name:'ToBeSent',
	data(){
		return {
			WillSentArray:[],
			mem:[],
			DataIndex:0
		}
	},
	mounted(){
		this.getWillSentOrder()
		console.log("1")
	},
	methods:{
		lowerOccur(){
			if(this.DataIndex<this.mem.length) {
				if(this.mem.length-this.DataIndex<4) {
					for(;this.DataIndex<this.mem.length;) {
						this.WillSentArray.push(this.mem[this.DataIndex++])
					}
				}else {
					for(let i = 0;i<4;i++) {
						this.WillSentArray.push(this.mem[this.DataIndex++])
					}
				}
			}
		},
		// 获取订单列表
		async getWillSentOrder(){
			const data = await getOrderList(3)
			this.mem = data.data
			console.log("sent", data)
			if(this.mem.length>3) {
				for(let i = 0;i<3;i++) {
					this.WillSentArray.push(this.mem[this.DataIndex++])
				}
			}else {
				this.mem.forEach(item=>{
					this.WillSentArray.push(item)
				})
			}
		},
		// 接单
		async receiveOrder(id){
			const data = await getOrderDelivery(id)
			if(data.code===1) {
				uni.showToast({
					title:'接单成功',
					icon:'checkmarkempty'
				})
				this.WillSentArray = []
				this.DataIndex = 0
				await this.getWillSentOrder()
				
			}
		}
	}
}
</script>

<style lang="scss" scoped>
	
	.father {
		position: relative;
		width: 100%;
		height: 100%;
		.son {
			position: absolute;
			 left:42vw;
			 // margin-left: -50px;
			 top:35vh;
			 // margin-top: -50px;
		}
	}
	.buttonHover {
		background-color: white;
	}
	.Sent {
		box-sizing: border-box;
		width: 100%;
		height: 80vh;
		// border: 1px solid red;
		display: flex;
		flex-direction: column;
		.card {
			width: 300px;
			margin:7px auto;
			display: flex;
			.content {
				height: 215px;
				width: 100%;
				// height: 100%;
				padding: 3px;
				background-color: white;
				box-shadow:
				  // inset 0 -3em 3em rgba(0, 0, 0, 0.1),
				  // 0 0 0 2px rgb(255, 255, 255),
				  0.3em 0.3em 1.5em rgba(0, 0, 0, 0.3);
				border-radius: 20px;
				// overflow: hidden;
				.item {
					width: 100%;
					height: 100%;
				}
			}

		}
	}
</style>